{% extends 'basic.html' %}
{% block title %}课程管理{% endblock %}
{% block content %}
{% load static %}
<h3>课程管理</h3>
<!-- 查询表单 -->
<form id="course-search-form" method="put" action="{% url 'manage_course' %}">
    {% csrf_token %}
    <div class="search-group">
        <!-- 课程名称 -->
        <label for="course-name">课程名称：</label>
        <input type="text" id="course-name" name="course_name" placeholder="请输入课程名称">
        <!-- 学分范围 -->
        <label for="credits-min">学分范围：</label>
        <input type="text" id="credits-min" name="credits_min" placeholder="最小学分">
        <span> - </span>
        <input type="text" id="credits-max" name="credits_max" placeholder="最大学分">
        <!-- 课程类型 -->
        <label for="course-type">课程类型：</label>
        <select id="course-type" name="course_type">
            <option value="">全部</option>
            {% for course_type in course_types %}
                <option value="{{ course_type.type_id }}">{{ course_type.type_name }}</option>
            {% endfor %}
        </select>
        <!-- 查询按钮 -->
        <button type="submit" class="search-btn">查询</button>
    </div>
</form>
<!-- 课程列表 -->
<table class="course-table">
    <thead>
        <tr>
            <th>序号</th>
            <th>编号</th>
            <th>名称</th>
            <th>课时</th>
            <th>学分</th>
            <th>类型</th>
            <th>状态</th>
            <th>选课要求</th>
            <th>备注</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        {% for course in courses %}
        <tr>
            <td>{{ forloop.counter }}</td>
            <td>{{ course.course_no }}</td>
            <td>
                {{ course.course_name }}
                {% if course.course_textbook_pic %}
                <img src="data:image/png;base64,{{ course.course_textbook_pic }}" alt="教材封面" class="course-image">
                {% endif %}
            </td>
            <td>{{ course.course_hours }}</td>
            <td>{{ course.course_point }}</td>
            <td>{{ course.type_name }}</td>
            <td>{{ course.course_status }}</td>
            <td>{{ course.course_reqs }}</td>
            <td>{{ course.course_memo }}</td>
            <td>
                <button class="edit-btn" data-id="{{ course.course_no }}">修改</button>
                <button class="delete-btn" data-id="{{ course.course_no }}">删除</button>
            </td>
        </tr>
        {% empty %}
        <tr>
            <td colspan="10">暂无课程</td>
        </tr>
        {% endfor %}
    </tbody>
</table>
<div class="back-to-main">
    <a href="{% url 'main_page' %}" class="back-btn">返回主页面</a>
</div>
<link rel="stylesheet" href="{% static 'css/manage_course.css' %}">
<script src="{% static 'js/manage_course.js' %}"></script>
{% endblock %}